<template>
	<view class="pageconfig">
		<view style="height: 98rpx;"></view>

		<!--顶部标题0的布局样式-->
		<view class="  commoncss0   " style="position: fixed;top: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
			<view class="cu-bar bg-white">
				<view class="action">
				</view>
				<view class="content text-bold text-"> {{dict.convert("ORDER_STATE", order.state)}}</view>
			</view>
		</view>


		<view class="cu-card article">
			<view class="cu-item shadow">
				<!-- 地址信息 -->
				<view class="addressDiv">
					<!--  姓名电话 -->
					<view class="flex  p-xs mb-sm">
						<view class="flex-sub  padding-sm margin-xs radius">{{ JSON.parse(order.addressDetails).fullName}} </view>
						<view class="flex-treble  padding-sm margin-xs radius"> {{ JSON.parse(order.addressDetails).phone}}</view>
					</view>
					<!--  地址 -->
					<view class="flex p-xs  mb-sm">
						<view class=" flex-treble padding-sm margin-xs radius">
							{{ JSON.parse(order.addressDetails).province}} {{ JSON.parse(order.addressDetails).city}}
							{{ JSON.parse(order.addressDetails).area}}
							{{ JSON.parse(order.addressDetails).specificAddress}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-card article" style="margin-top: -5%;">
			<view class="cu-item shadow">
				<view class="content goodsDiv">
					<image class="goodsImage" :src="JSON.parse(order.goodsDetails).coverPic" mode="aspectFill"> </image>
					<view class="desc">
						<view class="text-cut goodsName"> {{JSON.parse(order.goodsDetails).name}}</view>
						<view class="text-cut"> {{JSON.parse(order.goodsDetails).goodsSpecsList[0].specsName}}</view>
						<view> <text style="color: #ff5500">￥{{JSON.parse(order.goodsDetails).goodsSpecsList[0].specsPrice}}</text>
							<!-- <view class="cu-tag bg-red light sm round">正品保障</view>
							<view class="cu-tag bg-red light sm round">包邮</view> -->
						</view>
					</view>
				</view>
				<view class="flex solid-bottom  justify-between">
					<view class=" padding-sm margin-xs radius">订单号</view>
					<view class=" padding-sm margin-xs radius">{{order.orderNo}}
					</view>
				</view>
				<view class="flex solid-bottom  justify-between">
					<view class=" padding-sm margin-xs radius">下单时间</view>
					<view class=" padding-sm margin-xs radius">{{order.createTime}}
					</view>
				</view>
				<view class="flex solid-bottom  justify-between">
					<view class=" padding-sm margin-xs radius">支付时间</view>
					<view class=" padding-sm margin-xs radius">{{order.payTime}}
					</view>
				</view>
				<view class="flex solid-bottom  justify-between">
					<view class=" padding-sm margin-xs radius">单价</view>
					<view class=" padding-sm margin-xs radius">￥{{order.unitPrice}}
					</view>
				</view>
				<view class="flex solid-bottom  justify-between" style="margin-top: -0%;">
					<view class=" padding-sm margin-xs radius">数量</view>
					<view class=" padding-sm margin-xs radius">{{order.num}}</view>
				</view>
				<view class="flex solid-bottom  justify-between" style="margin-top: -0%;">
					<view class=" padding-sm margin-xs radius">总价</view>
					<view class=" padding-sm margin-xs radius">
						<view class="cu-tag bg-red light sm round" style="font-size:1.2rem;">
							￥{{order.totalPrice}}
						</view>
					</view>
				</view>
			</view>
			<view class="cu-card " style="margin-top: -5%;">
				<view class="cu-item shadow">

					<view class="flex solid-bottom  justify-end" style="margin-top: 0%;">
						<view v-if="order.state == 1" class="padding-sm margin-xs radius"><button class="cu-btn bg-orange"
								@tap="payOrder()">立即支付</button></view>
						<view v-if="order.state == 1" class="padding-sm margin-xs radius"><button class="cu-btn bg-orange"
								@tap="updState(5)">取消订单</button></view>
						<view v-if="order.state == 3" class="padding-sm margin-xs radius"><button class="cu-btn bg-orange"
								@tap="updState(4)">确认收货</button></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单信息
				order: {}
			}
		},
		onLoad(option) {
			// option.orderId = "1562805840312848386";
			this.getOrder(option.orderId);
		},

		methods: {
			/**
			 * 查询订单信息
			 */
			getOrder(orderId) {
				this.crud.get(this.path, "/api/client/all/order/" + orderId).then((res) => {
					this.order = res.data.data
				})
			},
			/**
			 * 订单支付
			 */
			payOrder() {
				this.crud.put(this.path, "/api/client/all/order/pay?payNo=" + this.order.payNo).then((res) => {
					uni.showToast({
						title: "支付成功",
						icon: 'none'
					});
					// 跳转至订单列表
					uni.reLaunch({
						url: '/pages/fpage3/index',
						success: function(e) {
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						}
					});
				})
			},
			/**
			 * 订单状态变更 （取消 和 收货）
			 */
			updState(state) {
				this.crud.put(this.path, "/api/client/all/order/updState/" + this.order.id, null, {
					state: state
				}).then((res) => {
					if (state == 5) {
						uni.showToast({
							title: "取消成功",
							icon: 'none'
						});
					}
					if (state == 4) {
						uni.showToast({
							title: "收货成功",
							icon: 'none'
						});
					}
					// 跳转至订单列表
					uni.reLaunch({
						url: '/pages/fpage3/index',
						success: function(e) {
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						}
					});
				})
			},
		}
	}
</script>

<style>
	.goodsDiv {
		margin-top: 5%;
	}


	/**本页全局配置的代码**/
	.pageconfig {
		margin-top: 0%;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}


	/**本页顶部标题0的css代码**/
	.commoncss0 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}
	
	.goodsName {
		width: 400rpx !important;
		text-align: left;
		margin-top: 0%;
		margin-left: 0%;
		/* 超出范围的显示... */
		overflow: hidden;
		/*隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/* 超出部分省略号 */
	}
</style>
